<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1200px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="联系人" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入联系人" clearable />
						</el-form-item>
						<el-form-item label="联系电话" prop="mobile">
							<el-input v-model="state.ruleForm.mobile" placeholder="请输入联系电话" clearable @input="onVerifiyNumberIntegerMobile" />
						</el-form-item>
						<el-form-item label="关联供应商" prop="supplier_id">
							<el-select
								v-model="state.ruleForm.supplier_id"
								clearable
								placeholder="请输入关键字/选择供应商"
								filterable
								remote
								:remote-method="supplierIdRemoteMethod"
								remote-show-suffix
								:loading="state.supplierIdSelect.loading"
								@focus="onSupplierIdFocus"
							>
								<el-option v-for="item in state.supplierIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="退货地址" prop="address">
							<el-input
								v-model="state.ruleForm.address"
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 6 }"
								placeholder="请输入退货地址"
								clearable
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { supplierApi } from '/@/api';
import { verifiyNumberInteger1 } from '/@/utils/toolsValidate';

const SupplierApi = supplierApi();
let callback: Function = () => {};
// 定义变量内容
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		supplier_address_id: '',
		name: '',
		mobile: '',
		address: '',
		supplier_id: '',
	},
	rules: {
		name: [{ required: true, message: '联系人不能为空', trigger: ['blur'] }],
		mobile: [{ required: true, message: '联系电话不能为空', trigger: ['blur'] }],
		address: [{ required: true, message: '联系人不能为空', trigger: ['blur'] }],
		supplier_id: [{ required: true, message: '关联供应商不能为空', trigger: ['blur', 'change'] }],
	},
	supplierIdSelect: {
		loading: false,
		options: [] as any,
	},
});
const formRef = ref();

/********** 触发事件 **********/
// 联系电话过滤
const onVerifiyNumberIntegerMobile = (val: string) => {
	state.ruleForm.mobile = verifiyNumberInteger1(val);
};
// 关联供应商获取焦点
const onSupplierIdFocus = () => {
	if (state.ruleForm.supplier_id) return;
	_supplierList({ pageNum: 1, pageSize: 10 });
};
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		if (state.dialog.type === 'add') {
			_supplierAddressAdd(state.ruleForm);
		} else {
			_supplierAddressEdit(state.ruleForm);
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog = {
		isShowDialog: true,
		type: data.type,
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	nextTick(() => {
		formRef.value.resetFields();
		if (state.dialog.type !== 'add') {
			_supplierAddressInfo({ supplier_address_id: row.id });
		}
	});
};
// 关联供应商搜索选择
const supplierIdRemoteMethod = (query: string) => {
	if (!query) return;
	_supplierList({ pageNum: 1, pageSize: 10, name: query });
};

/********** 网络请求 **********/
// 选择供应商
const _supplierList = (params: Object) => {
	state.supplierIdSelect.loading = false;
	SupplierApi.supplierList(params)
		.then((res) => {
			state.supplierIdSelect.options = res.data.list;
		})
		.catch(() => (state.supplierIdSelect.loading = false));
};
// 获取供应商退货地址信息
const _supplierAddressInfo = (params: any) => {
	SupplierApi.supplierAddressInfo(params).then((res) => {
		state.ruleForm = {
			...res.data.info,
			supplier_address_id: res.data.info.id,
		};
	});
};
// 添加供应商退货地址
const _supplierAddressAdd = (params: Object) => {
	SupplierApi.supplierAddressAdd(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
// 编辑供应商退货地址
const _supplierAddressEdit = (params: Object) => {
	SupplierApi.supplierAddressEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
